<template>
  <el-container style="height: 100%;background-color: #FFFFFF">
    <transition name="slide">
      <el-aside v-show="!isAsideCollapsed" width="200px" style="">
        <div style="margin-bottom: 70px; margin-top: 10px;font-size: 20px;font-weight: bold;">
          <img src="../assets/img/潮湿.png" style="width: 45px;height: 50px;" alt="logo">
          数据监视中心
        </div>

        <el-row>
          <button class="Feature" style="width: 90%;" @click="handleMenuClick('/home')"
                  :class="{ 'active': currentPage === '/home' }">首页
          </button>
        </el-row>
        <el-row>
          <button class="Feature" style="width: 90%;" @click="handleMenuClick('/Supervisory')"
                  :class="{ 'active': currentPage === '/Supervisory' }">监控管理
          </button>
        </el-row>
        <el-row>
          <button class="Feature" style="width: 90%;" @click="handleMenuClick('/ModuleMain')"
                  :class="{ 'active': currentPage === '/ModuleMain' }">巡检任务
          </button>
        </el-row>
        <el-row>
          <button class="Feature" style="width: 90%;">警报处理
          </button>
        </el-row>
        <el-row>
          <button class="Feature" style="width: 90%;">数据分析</button>
        </el-row>
        <el-row>
          <button class="Feature" style="width: 90%;">日志管理</button>
        </el-row>

        <el-row style="margin-top: 200px;">
          <button class="Feature" style="width: 90%; ;" @click="quit">退出登录</button>
        </el-row>
      </el-aside>
    </transition>

    <transition name="slide-body">
      <el-container>
        <el-header style="display: flex; justify-content: space-between; align-items: center; font-size: 12px">
          <div>
            <el-button icon="el-icon-s-fold" @click="toggleAside" style="margin-left: 10px"></el-button>
          </div>
          <div>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                       style="margin-top: 10px"></el-avatar>
          </div>
        </el-header>
        <el-main class="fade-slide">

          <div v-if="currentPage === '/ModuleMain'">
            <div>
              <moduleMain/>
            </div>
          </div>
          <div v-else-if="currentPage === '/home'">
            <Home/>
          </div>
          <div v-else-if="currentPage === '/Supervisory'">
            <Supervisory/>
          </div>
        </el-main>
      </el-container>
    </transition>
  </el-container>

</template>

<style scoped>
@import "../assets/css/homePage.css";
</style>


<script>
import moduleMain from "@/text/views/ModuleMain.vue";
import Home from "@/views/homePage/home.vue";
import Supervisory from "@/views/supervisory/supervisory.vue"


export default {
  data() {
    return {
      currentPage: '/home', // 默认显示页面一
      isAsideCollapsed: false // 初始状态为展开
    };
  }, components: { // 引入组件
    moduleMain,
    Home,
    Supervisory,
  },
  methods: {
    handleMenuClick(value) {
      // this.currentPage = '/ModuleMain'; // 点击菜单项2-1显示页面一
      if (value === '/home') {
        this.currentPage = '/home'
      }
      if (value === '/ModuleMain') {
        this.currentPage = '/ModuleMain';
      }
      if (value === '/Supervisory') {
        this.currentPage = '/Supervisory';
      }
    },
    toggleAside() {
      this.isAsideCollapsed = !this.isAsideCollapsed;
    },
    quit() {
      console.log("退出")
      localStorage.removeItem('token')
      this.$router.push('/login');
    },
  }
};
</script>
